<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>Demo1</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }

        .maskStyle {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: #F1F1F1;
            opacity: 1;
        }
    </style>
</head>

<body>

    <div id="mapContainer" style="position: relative;">
    </div>
    <div class="maskStyle" id="mask">
        <div style="left:45%;position:absolute;top: 50%;font-size:70px">
            <div class="box" id="div_box">
                <div class="load" id="load"></div>
            </div>
            <span id='result'>0%</span>
        </div>
    </div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [118.72875807443943, 31.96637729001834, 3235.211909004852],
        lookAt: [118.72203191891468, 31.995466117521016, 0],
        cameraScrollSpeed: 15,
        minZoom: 3,
        maxZoom: 22,
        ambientLightIntensity: 2,
        ambientLightType: 'hemiSphere',
        useCarpet: true,
        background: "Color",
        enableMap: false,
        backGroundColor: "#000000",
        useDefaultTexture: false, //是否使用瓦片默认纹理
        baseLayer: [
            {
                url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                readableUrl: true,
                tileType: 'image',
            },
        ]
    });

    var models = [];
    var river, road, build, hexin;
    var ereaDatas = [[118.72148477791501, 31.983015607054618], [118.72605603559137, 31.988044491412793], [118.72993630342665, 31.98552027643373], [118.72491519623064, 31.980221679772477], [118.72148477791501, 31.983015607054618]]
    var ereaDatas2 = [[118.71637780744254, 32.02485820298663], [118.71518974801077, 32.022428620209006], [118.71848421442151, 32.02134471330215], [118.71737679506349, 32.01904170937765], [118.72393165352851, 32.01628056013649], [118.72675002607485, 32.020083509172494], [118.72751906590898, 32.02216045370644]
        , [118.72306085766802, 32.02283386484691], [118.71637780744254, 32.02485820298663]];
    var ereaDatas3 = [[118.74688811026009, 32.01412091764768], [118.7441280974248, 32.01008168605141], [118.75011503093177, 32.007143830998245], [118.75168812396674, 32.00897554108358], [118.75291748556992, 32.011270573015835], [118.74688811026009, 32.01412091764768]];
    var roadDatas = [[[118.70776052568256, 32.01880144058991], [118.71966660794376, 32.01549705627032], [118.74663543189467, 32.0020988987291]]
        , [[118.74663527439391, 32.00181797256037], [118.71958594467178, 32.015342426788095], [118.70783471295718, 32.018528994216204]]
        , [[118.73400493853664, 32.026488637068866], [118.73346492053007, 32.023693536040675], [118.73034227904893, 32.01544296976284], [118.72836690638395, 32.012121530584565], [118.72760778640868, 32.011312624413534], [118.71279568292242, 31.99287047064336], [118.7052368509304, 31.985313784293854]]
        , [[118.705321056926, 32.00411584920498], [118.70876864423153, 32.00328243133199], [118.73678403352166, 31.984978531785547]]
        , [[118.73663397463983, 31.98472397575267], [118.70866705064309, 32.003058163159935], [118.70522199356677, 32.003906452820246]]
        , [[118.73365383724301, 32.02683060046667], [118.73318537847997, 32.02385318014264], [118.73038968507703, 32.01651661914037], [118.72806057754009, 32.01217187001], [118.71259639814264, 31.99310694670794], [118.70499864647607, 31.985548701375155]]
        , [[118.71114514572325, 31.978617672123285], [118.72421815409955, 31.993010734931293], [118.73750503115687, 32.00907309397895], [118.74463650921011, 32.01940188981927]]
        , [[118.70183219682697, 31.989743963844575], [118.70940117998167, 31.997198485821034], [118.71736235265293, 32.007226299719434]]
        , [[118.70653635821692, 32.01147499461183], [118.71241178108126, 32.00995444533083], [118.72537139513001, 32.00301194509034], [118.7414863997062, 31.99243954064564]]
        , [[118.74133410673561, 31.992328290708258], [118.72525799626362, 32.00285858688414], [118.7123663513062, 32.00974021884993], [118.70670265169882, 32.01120088029101]]];
    var flyLinePoint = [[118.71328198566364, 32.00980887093719], [118.71646933142304, 32.01593651308841], [118.72185013701338, 32.00516163588384], [118.72666188918966, 32.01116708761019], [118.73587652877728, 32.006454611488216],
    [118.73084567872276, 32.000687329126], [118.73560239577893, 32.02058966544744], [118.72255337227591, 31.990627297255816], [118.70927143379619, 31.990668910005766]];
    let pois = [{
        position: [118.71962455672757, 32.01052494256855],
        name: '奥体中心'
    }, {
        position: [118.70891929059337, 32.014519967898714],
        name: '江苏大剧院'
    }, {
        position: [118.71104574836133, 31.99567928390044],
        name: '博览中心'
    }, {
        position: [118.72527694564016, 31.990115462345596],
        name: '明基医院'
    }, {
        position: [118.72508153559745, 32.00451218411017],
        name: '河西CBD'
    }];
    init();
    function init() {
        //添加模型
        addFbx();
        //添加最大的发射圆环
        addScan();
        //添加发光道路
        addRoads();
        //添加动效地标
        addPlaces();
        //添加飞线
        addFlyLine();
        //添加区域特效
        addArea();
        //开启性能检测组件
        this.app.openStats();
    }
    app.on('Click', function (e) {
        console.log(e);
    });
    // document.getElementById('mask').style.display = 'none';
    function addFbx() {
        let modelLayer = new GE.Layer();
        app.add(modelLayer);

        let urls = ['River.FBX', 'Road.FBX', 'Hexin_Build.FBX', 'Build.FBX'];
        let loadedFBX = 0;
        let percent = Math.ceil(100.0 / urls.length);
        for (let i = 0; i < urls.length; i++) {
            model = new GE.OverLay({
                type: 'fbx',
                url: 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/demo1/' + urls[i],
                position: [118.73277790200805, 32.00404476842, 2 * i],
                // scale: [100, 100, 100],
                // rotation: [45, 0, 0],
                success: function () {
                    loadedFBX++;
                    load.style.width = Math.min(loadedFBX * 3 * percent, 300) + 'px';
                    result.innerText = Math.min(loadedFBX * percent, 100) + '%';
                    if (loadedFBX == urls.length) {
                        //加载完成后延迟0.1秒再显示主场景
                        setTimeout(function () {
                            //添加按钮
                            addBtn();
                            //添加POI
                            addPOI();
                            //添加辉光通道
                            openUnrealBloom();
                            document.getElementById('mask').style.display = 'none';
                        }, 300)
                    }
                }
            });
            modelLayer.add(model);
            models.push(model);
        }
        river = models[0];
        road = models[1];
        hexin = models[2];
        build = models[3];
    }

    function openUnrealBloom() {
        app.postProcess.openSelectiveUnrealBloomPass({
            threshold: 0,
            strength: 0.8,
            radius: 0.3,
        });

        hexin.traverse(function (obj) {
            if (obj.isMesh) {
                obj.layers.enable(1);
            }
        })
    }

    function addFlyLine() {
        let flyline = new GE.FlyLine({
            positions: [
                new GE.Point(118.72302471900817, 32.00261074543409, 0),
                new GE.Point(118.72384394532999, 31.993274830381445, 500),
                new GE.Point(118.72516374995796, 31.98390338734335, 0)
            ]
        });
        app.add(flyline);

        let flyline2 = new GE.FlyLine({
            positions: [
                new GE.Point(118.72302471900817, 32.00261074543409, 0),
                new GE.Point(118.73617243720062, 32.00647300579018, 500),
                new GE.Point(118.74883688061205, 32.010723321406324, 0)
            ]
        });
        app.add(flyline2);

        let flyline3 = new GE.FlyLine({
            positions: [
                new GE.Point(118.72302471900817, 32.00261074543409, 0),
                new GE.Point(118.7219288598545, 32.012735472418825, 500),
                new GE.Point(118.72139179556089, 32.02011730432809, 0)
            ]
        });
        app.add(flyline3);
    }

    function addScan() {
        let CircleScan = new GE.CircleScan({
            center: [118.7270256509128, 32.00248268414715, 10],
            radius: 5000,
            color: '#0FC1FD',
            // color: '#00FF00',
            time: 6000,
            bandwidth: 0.0015,
        })
        app.add(CircleScan);
    }

    function addPlaces() {
        let flylineLayer = new GE.Layer();
        app.add(flylineLayer);
        for (let i = 0; i < flyLinePoint.length; i++) {
            let crossbeam = new GE.CrossBeam({
                center: [flyLinePoint[i][0], flyLinePoint[i][1], 10],
                width: 30,
                height: 1000,
                color: '#00aaaa',
                speed: 1000,
            })
            flylineLayer.add(crossbeam);

            let cs = new GE.CircleScan({
                center: [flyLinePoint[i][0], flyLinePoint[i][1], 10],
                radius: 50,
                color: (i % 2 == 0) ? '#ff00ff' : '#eeee00',
                speed: 1000,
            })
            flylineLayer.add(cs);
        }
    }

    function addRoads() {
        for (let i = 0; i < roadDatas.length; i++) {
            let roadData = roadDatas[i];
            let pathArray = [];
            for (let j = 0; j < roadData.length; j++) {
                pathArray.push(new GE.Point(roadData[j][0], roadData[j][1], 20, "4326"));
            }

            for (var k = 0; k < pathArray.length - 1; k++) {
                let points = [pathArray[k], pathArray[k + 1]];
                let rs = new GE.TrailLink({
                    pathArray: pathArray,
                    curSegmentNo: k,
                    points: points,
                    color: '#00FF00',
                    time: 5000,
                    width: 10,
                    texture: 'http://192.168.2.100:8702/dev/examples/resources/images/TrailLink.png'
                })
                app.add(rs);

                rs.traverse(function (obj) {
                    if (obj.isMesh) {
                        obj.layers.enable(1);
                    }
                })
            }
        }
    }

    function addArea() {
        let RippleWall = new GE.RippleWall({
            positions: ereaDatas,
            color: '#E4A635',
            time: 2000,
            num: 2,
            height: 100,
            altitude: 1
        });
        app.add(RippleWall);

        let RippleWall2 = new GE.RippleWall({
            positions: ereaDatas2,
            color: '#914EEE',
            time: 2000,
            num: 2,
            height: 100,
            altitude: 1
        });
        app.add(RippleWall2);


        let RippleWall3 = new GE.RippleWall({
            positions: ereaDatas3,
            color: '#9CF53B',
            time: 2000,
            num: 2,
            height: 100,
            altitude: 1
        });
        app.add(RippleWall3);
    }

    function addPOI() {
        let poiLayer = new GE.Layer();
        app.add(poiLayer);

        for (let i = 0; i < pois.length; i++) {
            let poi = pois[i];

            //这里也可以使用POI对象
            const div = document.createElement('div');
            div.innerHTML = '<h2 style="color:white;"><font color="#75CA2E" style="font-weight:lighter"></font>' + poi.name + '<font color="#75CA2E" style="font-weight:lighter"></font></h2>'
            let htmlobject = new GE.HtmlMarker(div);
            //设置组件在三维场景中的位置
            let position = new GE.Point(poi.position[0], poi.position[1], 0, '4326').changeEPSGType('3857');
            htmlobject.position.set(position.x, position.y, 300);
            //设置对其方式，0.5,0.5为中心对齐
            htmlobject.center.set(0.5, 0.5);

            poiLayer.add(htmlobject);

            let arrow = new GE.OverLay({
                url: 'http://192.168.2.100:8702/resources/demo1/jiantou.FBX',
                position: [poi.position[0], poi.position[1], 120],
                success: function (f) {
                }
            });
            poiLayer.add(arrow);
        }
    }

    function addBtn() {
        let button = new GE.Button('建筑群显隐', function () {
            build.visible = !build.visible;
        });
        app.ui.add(button);

        let button1 = new GE.Button('核心建筑显隐', function () {
            hexin.visible = !hexin.visible;
        });
        app.ui.add(button1);
    }
</script>

</html>